{% extends "base.html" %}

{% block head %}
<style type="text/css" media="all">
  @import "{{ MEDIA_URL }}css/thickbox.css";
</style>
<script>var tb_pathToImage = "{{ MEDIA_URL }}imgs/loadingAnimation.gif";</script>
<script src="{{ MEDIA_URL }}js/thickbox.js" type="text/javascript"></script>
{% endblock %}

{% block content %}
<h1>Ajax Form View</h1>
<div>
  AjaxFormView allows to smartly handle Ajax request,
  <ul>for instance (JS activated):
  <li>displaying a popup with a form fetched by Ajax</li>
  <li>submit if through ajax and display results in place</li>
  </ul>
  <ul>or (JS not activated: no Ajax)):
  <li>displaying the same previous form included in standalone page</li>
  <li>redirecting to 'standard' view on submit</li>
  <ul><li>form with errors</li>
  <li>redirect on success</li></ul>
  </ul>
</div>
<div>
  HowTo:
  <ol>
    <li>Define your <code>template_name</code> as usual, with you Ajax form inside</li>
    <li>Optionnaly, define your customised template to display form when Ajax not activate. Default defined as class var</li>
    <li>Optionnaly, define your <code>_ajax_success</code> function to customise Ajax reponse. Default is simple acknowledgement</li>
    <li>Optionnaly, define your <code>_noajax_success</code> function to customise standard response. Default defined as in FormView, redirect to <code>redirect_field</code> URL</li>
  </ol>
</div>
Click this link for <a class="thickbox" href="/form/ajax/?height=300&width=300">Ajax example</a>. Try it while JS activated and when not.
<div class="highlight"><pre>
<span class="kn">from</span> <span class="nn">obviews.views</span> <span class="kn">import</span> <span class="n">View</span><span class="p">,</span> <span class="n">FormView</span><span class="p">,</span> <span class="n">AjaxFormView</span><span class="p">,</span> <span class="n">CutResponse</span>

<span class="c"># Container View (this page)</span>
<span class="k">class</span> <span class="nc">AjaxView</span><span class="p">(</span><span class="n">View</span><span class="p">):</span>
    <span class="n">template_name</span> <span class="o">=</span> <span class="s">&quot;forms/ajax.html&quot;</span>
    
<span class="c"># Ajax form</span>
<span class="k">class</span> <span class="nc">AjaxForm</span><span class="p">(</span><span class="n">AjaxFormView</span><span class="p">):</span>
    <span class="n">template_name</span> <span class="o">=</span> <span class="s">&quot;forms/ajax_form.html&quot;</span>
    <span class="n">defaults</span> <span class="o">=</span> <span class="p">{</span><span class="s">&quot;on_success&quot;</span><span class="p">:</span> <span class="s">&quot;/form/success/&quot;</span><span class="p">}</span>
    <span class="n">form_class</span> <span class="o">=</span> <span class="n">TestForm</span>

    <span class="k">def</span> <span class="nf">process_form</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">form</span><span class="p">,</span> <span class="n">request</span><span class="p">,</span> <span class="o">**</span><span class="n">variables</span><span class="p">):</span>
        <span class="k">pass</span>

<span class="n">urlpatterns</span> <span class="o">+=</span> <span class="n">patterns</span><span class="p">(</span><span class="s">&#39;&#39;</span><span class="p">,</span>                
    <span class="c"># Ajax form</span>
    <span class="p">(</span><span class="s">&#39;^ajax/$&#39;</span><span class="p">,</span> <span class="n">AjaxView</span><span class="p">()),</span>
    <span class="p">(</span><span class="s">&#39;^form/ajax/$&#39;</span><span class="p">,</span> <span class="n">AjaxForm</span><span class="p">()),</span>
<span class="p">)</span>
</pre></div>
<p><strong>What's next?</strong> The "all inclusive" example <a href="/form/all/">where all hooks are used</a></p>
{% endblock %}
